<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/index.css">
    <script src="./fonts/fonts.js"></script>
    <title>Document</title>
</head>

<body>
    <header class="layout">
        <a href="javascript:;">
            <svg class="icon header-icon" aria-hidden="true">
                <use xlink:href="#icon-qingningmeng"></use>
            </svg>
            <span>青柠起始页</span>
        </a>
    </header>
    <section id="topContainer" class="layout">
        <div id="topSloganContainer">
            <h1 class="topSlogan">
                简洁、美观、实用的
                <br>
                浏览器起始页
            </h1>
            <p>全平台兼容，即开即用</p>
            <div id="mainBtnContainer">
                <a href="javascript:;">
                    <button class="mainBtn" id="btnStart" type="button" title="立即打开青柠起始页">
                        开始使用
                    </button>
                </a>
                <button id="btnExt" class="mainBtn" type="button">安装扩展</button>
            </div>
        </div>
        <div class="rightItem">
            <!-- <img class="topImage" src="./images/1.png" alt=""> -->
            <img src="../images/1.png" alt="网站">
        </div>
    </section>
    <section id="intro">
        <div class="layout">
            <h4 class="intro-func">功  能</h4>
            <h1 class="intro-title">化繁为简</h1>
            <p class="intro-detail">青柠起始页以最简洁的设计容纳诸多实用功能。</p>
            <div class="panel-container">
                <div class="panel">
                    <svg class="icon intro-icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_sousuo"></use>
                    </svg>
                    <div class="text">
                        <h4>搜索</h4>
                        <p>使用您喜欢的任意搜索引擎，开启网上冲浪之旅。</p>
                    </div>
                </div>
                <div class="panel">
                    <svg class="icon intro-icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_sousuo"></use>
                    </svg>
                    <div class="text">
                        <h4>搜索</h4>
                        <p>使用您喜欢的任意搜索引擎，开启网上冲浪之旅。</p>
                    </div>
                </div>
                <div class="panel">
                    <svg class="icon intro-icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_sousuo"></use>
                    </svg>
                    <div class="text">
                        <h4>搜索</h4>
                        <p>使用您喜欢的任意搜索引擎，开启网上冲浪之旅。</p>
                    </div>
                </div>
                <div class="panel">
                    <svg class="icon intro-icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_sousuo"></use>
                    </svg>
                    <div class="text">
                        <h4>搜索</h4>
                        <p>使用您喜欢的任意搜索引擎，开启网上冲浪之旅。</p>
                    </div>
                </div>
                <div class="panel">
                    <svg class="icon intro-icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_sousuo"></use>
                    </svg>
                    <div class="text">
                        <h4>搜索</h4>
                        <p>使用您喜欢的任意搜索引擎，开启网上冲浪之旅。</p>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <section  class="detail layout">
        <div class="text">
            <h1>全能搜索框。</h1>
            <p>支持任何搜索引擎 / 一键翻译搜索内容 / 一键直达常用网站 / 输入算式直接计算结果——助您事半功倍。
            </p>
        </div>
        <div class="img">
          <img src="./images/1.png" alt="全能搜索框">
        </div>
    </section>
    <section  class="detail layout">
        <div class="text">
            <h1>全能搜索框。</h1>
            <p>支持任何搜索引擎 / 一键翻译搜索内容 / 一键直达常用网站 / 输入算式直接计算结果——助您事半功倍。
            </p>
        </div>
        <div class="img">
          <img src="./images/1.png" alt="全能搜索框">
        </div>
    </section>
    <section  class="detail layout">
        <div class="text">
            <h1>全能搜索框。</h1>
            <p>支持任何搜索引擎 / 一键翻译搜索内容 / 一键直达常用网站 / 输入算式直接计算结果——助您事半功倍。
            </p>
        </div>
        <div class="img">
          <img src="./images/1.png" alt="全能搜索框">
        </div>
    </section>
</body>

</html>